<template>
	<layout>
		<simple-toolbar :title="$t('contract.contract')">
			<view class="update" v-if="userInfo.user_type == 1">
				<view class="button" @click="navToAdd">
					<image src="../../../static/create.png"></image>
					<text>{{ $t('contract.newContract') }}</text>
				</view>
			</view>
		</simple-toolbar>
		<view class="pad-base table">
			<view>
				<el-table :data="list" style="width: 100%">
					<el-table-column align="center" prop="contract_num" :label="$t('contract.contract_id')"></el-table-column>
					<el-table-column align="center" prop="last_name" :label="$t('contract.last_name')"></el-table-column>
					<el-table-column align="center" prop="first_name" :label="$t('contract.first_name')"></el-table-column>
					<el-table-column align="center" prop="email" :label="$t('contract.email')"></el-table-column>
					<el-table-column align="center" prop="start_date" :label="$t('contract.start_date')" width="120"></el-table-column>
					<el-table-column align="center" prop="fund_date" :label="$t('contract.fund_date')" width="120"></el-table-column>
					<el-table-column align="center" prop="total_tib" :label="$t('contract.total_tib')"></el-table-column>
					<el-table-column align="center" prop="current_tib" :label="$t('contract.current_tib')"></el-table-column>
					<el-table-column align="center" prop="fee" :label="$t('contract.fee')"></el-table-column>
					<el-table-column align="center" prop="expiration" :label="$t('contract.expiration')" width="120"></el-table-column>
					<el-table-column align="center" prop="is_active" :label="$t('contract.is_active')">
						<template slot-scope="scope">
							{{ scope.row.is_active ? 'YES' : 'NO' }}
						</template>
					</el-table-column>
					<el-table-column align="center" prop="creater_email" :label="$t('contract.creater_email')"></el-table-column>
					<el-table-column align="center" :label="$t('contract.operation')" width="80">
						<template slot-scope="scope">
							<el-button v-if="userInfo.user_type == 1" @click.native.prevent="edit(scope.$index)"
								type="text" size="small">
								{{ $t('contract.modify') }}
							</el-button>
							<el-button v-else @click.native.prevent="navToDetail(scope.$index)" type="text"
								size="small">
								{{ $t('contract.view') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</view>
		</view>
	</layout>
</template>

<script>
	import {
		getContractList,
		getMyContractList
	} from "../../../js_sdk/uni-admin/contract.js"
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				list: []
			}
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onShow() {
			this.loadData()
		},
		methods: {
			navToDetail(idx) {
				uni.navigateTo({
					url: "./detail?detail=" + encodeURIComponent(JSON.stringify(this.list[idx]))
				})
			},
			edit(idx) {
				uni.navigateTo({
					url: "./edit?contract=" + encodeURIComponent(JSON.stringify(this.list[idx]))
				})
			},
			navToAdd() {
				uni.navigateTo({
					url: "./edit"
				})
			},
			async loadData() {
				try {
					let res
					if (this.userInfo.user_type == 1) {
						res = await getContractList()
						this.list = res.data
					} else {
						res = await getMyContractList()
						this.list = res.data
					}
				} catch (e) {
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .table {
	// 	text-align: center;
	// 	overflow-x: scroll;
	// 	.scroll_box {
	// 		float: left;
	// 		min-width: 100%;
	// 		.header {
	// 			display: flex;
	// 			margin: 0 6.25rpx 4.68rpx;
	// 			.item {
	// 				flex: 1;
	// 				margin: 0;
	// 			}
	// 			.last-item {
	// 				width: 31.25rpx;
	// 			}
	// 		}
	// 		.row {
	// 			// white-space: nowrap;
				
	// 			display: flex;
	// 			height: 18.75rpx;
	// 			line-height: 18.75rpx;
	// 			background: #FFFFFF;
	// 			border: 0.39rpx solid #C4C4C4;
	// 			border-radius: 1.56rpx;
	// 			margin-bottom: 9.37rpx;
	// 			.item {
	// 				flex: 1;
	// 				margin: 0 6.25rpx;
	// 			}
	// 			.last-item {
	// 				width: 31.25rpx;
	// 				margin: 0 6.25rpx;
	// 			}
	// 		}
	// 	}
	// }
	
	.text {
		font-size: 7.81rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 20%;
	}

	.box {
		display: flex;
		justify-content: space-between;
	}

	.item:first-child {
		margin-left: 23.43rpx;
	}

	.item {
		flex: 1;
	}

	.subItem {
		margin-top: 12.5rpx;
		color: #3B3E66;
	}

	.key {
		font-weight: bold;
	}

	.value {
		opacity: 0.5;
	}
</style>
